const path = require('path')
const webpack = require('webpack')
const htmlWebpackPlugin = require('html-webpack-plugin')
const vueLoaderPlugin = require('vue-loader/lib/plugin.js')

module.exports = {
    // 入口，指定 webpack 将要打包的文件
    entry: path.join(__dirname, './src/main.js'),
    // 配置输出文件，path 指定输出的目录， filename 指定输出文件的名称
    output: {
        path: path.join(__dirname, './dist'),
        filename: 'bundle.js'
    },
    mode: 'development',
    plugins: [ // 配置插件的节点
        new htmlWebpackPlugin({
            // 创建在内存中生成 HTML 页面的插件
            // 该插件的作用：
            // 1. 自动在内存中根据指定页面生成一个页面
            // 2. 自动把打包好的 bundle.js 追加到页面中

            template: path.join(__dirname, './src/index.html'), // 指定模板页面
            filename: 'index.html' // 指定生成的页面的名称
        }),
        new vueLoaderPlugin()
    ],
    module: { // 配置所有第三方模块的加载器
        rules: [ // 所有第三方模块的匹配规则
            // 当配置多个 loader 时，调用规则是 从后往前
            // 注意：在 2.X 版本中要求带 -loader， 在 1.X 版本中可以不带 -loader 
            { test: /\.css$/, use: ['style-loader', 'css-loader'] }, // 配置处理 .css 文件的第三方 loader 规则
            { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=7631&name=[hash:8]-[name].[ext]'}, // 处理图片路径
            // limit 指定图片大小,单位是 byte,如果引用的图片大于等于 limit 指定的值,则不会转为 base64 格式的字符串,反之则会
            // name 设置图片被编译之后的名称,默认采用 hash 编码,如果想要原样输出则使用 [name].[ext]
            // [hash:8] 表示使用 hash 编码的前八位,hash 编码为 32 位, 所以指定的值不能超过 32 位
            { test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader'}, // 处理字体文件
            { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/},
            { test: /\.vue$/, use: 'vue-loader' },
            { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }
        ]
    },
    resolve: {
        alias: { // 修改 Vue 被导入时的包路径
            "vue$": "vue/dist/vue.js"
        }
    }
}

// 由于是在项目中本地安装的 webpack-dev-server，所以无法把它当作脚本命令在终端中运行
// 只有安装到全局的 -g，才能在终端中运行
// 注意：webpack-dev-server 想要正常运行必须在本地项目中安装  webpack
// webpack-dev-server 打包生成的文件并没有存放到实际的物理磁盘上，而是托管到了电脑的内存中，所以在项目根目录中找不到指定文件
// webpakc-dev-server 使用步骤
// 1. npm i webpack-dev-server -D
// 2. 在 package.json 中配置
// contentBase 内容根路径   --open 自动打开浏览器
// --hot  默认每次保存都会重新生成一个新的文件，使用了 hot 之后每次保存只作局部的补丁
/* "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"
  } */
// 3. npm i webpack -D
// 4. npm run dev
// 5. 从项目根路径中引用 <script src="/bundle.js"></script>  


// webpack 默认只能打包处理 JS 类型的文件
// 如果要处理非 JS 类型的文件，需要手动安装一些合适 第三方 loader 加载器

// 1. 想要打包处理 CSS 类型的文件，需要安装 npm i style-loader css-loader -D
// 2. 在 webpack.config.js 配置文件的 module 配置节点中配置匹配规则
/*
module: { // 配置所有第三方模块的加载器
        rules: [ // 所有第三方模块的匹配规则
            { test: /\.css$/, use: ['style-loader', 'css-loader'] } // 配置处理 .css 文件的第三方 loader 规则
        ]
    }
*/

// webpack 处理 CSS 文件中的 URL 地址
// 1. npm i url-loader file-loader -D 
// 2. 配置规则
/*
    { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=7631&name=[hash:8]-[name].[ext]'} // 处理图片路径
    // limit 指定图片大小,单位是 byte,如果引用的图片大于等于 limit 指定的值,则不会转为 base64 格式的字符串,反之则会
    // name 设置图片被编译之后的名称,默认采用 hash 编码,如果想要原样输出则使用 [name].[ext]
    // [hash:8] 表示使用 hash 编码的前八位,hash 编码为 32 位, 所以指定的值不能超过 32 位
*/

// webpack 只能处理部分 ES6 语法
// Babel 可以将高级语法转换成低级语法
// 配置 Babel：
// 1. 安装 loader
//      1.1 npm i babel-core babel-loader babel-plugin-transform-runtime -D
//      1.2 npm i babel-preset-env babel-preset-stage-0 -D
// 2. 在 webpck.config.js module rules 中配置规则
//      { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/}
//     排除编译 node_modules 中所有的第三方 JS 文件
// 3. 在项目根目录中新建 .babelrc 的 Babel 配置文件
//       这个配置文件是 JSON 格式， JSON语法规范：不能写注释，所有字符串必须用双引号包裹起来
/*
{
    "presets": ["env", "stage-0"],
    "plugins": ["transform-runtime"]
}
*/